<template>
	<view class="mine-tab">
		<view class="mine-tab-head">
			<view class="tab-head">
				<template v-for="(item, index) in tabSetting.view">
					<view :class="['tab-head-item', defaultActive == index ? 'active' : '']" :key="index" @click="tabEvent(index)">{{ item.label }}</view>
				</template>
			</view>
			<!-- 成长足迹 -->
			<view class="swiper-item" v-if="defaultActive == 0">
				<view class="life-experience" v-for="(item, index) in tabSetting.view[0].data" :key="index">
					<view class="life-experience-icon"><image src="/static/images/mine/life-experience-icon.png" mode="" class=""></image></view>
					<view class="life-experience-line">
						<view class="life-experience-top">
							<view class="life-experience-time">{{ item.created_time | dateformat }}</view>
							<view class="life-experience-operation" @click="openOperation(index)">
								<text class="dot"></text>
								<text class="dot"></text>
								<text class="dot"></text>
								<view :class="['life-experience-btn', showOperation == index ? 'on' : '']">
									<view class="on">分享</view>
									<view @click="remove(item._id)">删除</view>
								</view>
							</view>
						</view>
						<view class="life-experience-content" v-if="item.note">
							<rich-text>{{ item.note }}</rich-text>
						</view>
						<template v-if="item.pic_urls">
							<view class="life-experience-pic one-pic" v-if="item.pic_urls.length == 1">
								<template v-for="(pic, i) in item.pic_urls">
									<image :src="pic" mode="widthFix" :key="i"></image>
								</template>
							</view>
							<view class="life-experience-pic two-pic" v-else-if="item.pic_urls.length == 2">
								<template v-for="(pic, i) in item.pic_urls">
									<image :src="pic" mode="aspectFill" :key="i"></image>
								</template>
							</view>
							<view class="life-experience-pic three-pic" v-else-if="item.pic_urls.length == 3">
								<template v-for="(pic, i) in item.pic_urls">
									<image :src="pic" mode="aspectFill" :key="i"></image>
								</template>
							</view>
						</template>
						<template v-if="item.video_url && item.pic_urls.length == 0">
							<view class="video_box"><video :src="item.video_url" :autoplay="false" :loop="false"></video></view>
						</template>
					</view>
				</view>
			</view>
			<!-- 模态框 -->
			<u-modal v-model="modalSetting.show" :content="modalSetting.message" :show-cancel-button="true" @confirm="deleteDynamic"></u-modal>
			<u-toast ref="uToast" />
			<!-- 个人资料 -->
			<view class="swiper-item" v-if="defaultActive == 1">
				<view class="personal-data-tag-box">
					<text class="personal-data-tag personal-orange">孝顺</text>
					<text class="personal-data-tag personal-yellow">温柔贤惠</text>
					<text class="personal-data-tag personal-green">善良有爱心</text>
				</view>
				<view class="basic-data">
					<view class="basic-data-title">基本信息</view>
					<view class="basic-data-ul">
						<view class="basic-data-li">
							<text class="basic-data-label">年龄：</text>
							<!-- <view class="basic-data-content">1997-01-23 22岁 属牛 水瓶座</view> -->
							<!-- <view class="basic-data-content">1997-01-23 22岁 属牛 水瓶座</view> -->
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">婚况：</text>
							<view class="basic-data-content">{{ tabSetting.userInfo.marital_status }}</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">籍贯：</text>
							<view class="basic-data-content">安徽</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">身高：</text>
							<view class="basic-data-content">{{ tabSetting.userInfo.height + 'cm' }}</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">工作：</text>
							<view class="basic-data-content">{{ tabSetting.userInfo.job }}</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">工作地：</text>
							<view class="basic-data-content">{{ tabSetting.userInfo.work_place }}</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">月薪：</text>
							<view class="basic-data-content">
								<template v-if="tabSetting.userInfo.vip == -1">
									VIP可见
									<view class="open-up">去开通</view>
								</template>
								<template v-else>
									{{ tabSetting.userInfo.salary }}
								</template>
							</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">学历：</text>
							<view class="basic-data-content">
								<template v-if="tabSetting.userInfo.vip == -1">
									VIP可见
								</template>
								<template v-else>
									{{ tabSetting.userInfo.education }}
								</template>
							</view>
						</view>
						<view class="basic-data-li">
							<text class="basic-data-label">住房：</text>
							<view class="basic-data-content">
								<template v-if="tabSetting.userInfo.vip == -1">
									VIP可见
								</template>
								<template v-else>
									{{ tabSetting.userInfo.housing }}
								</template>
							</view>
						</view>
					</view>
					<view class="basic-data-li">
						<text class="basic-data-label">手机号：</text>
						<view class="basic-data-content">188****7689</view>
					</view>
				</view>
			</view>
			<button class="share-btn" open-type="share">分享相亲卡片</button>
		</view>
	</view>

</template>

<script>
import { deleteDynamic } from '@/api/user/user.js';
export default {
	props: {
		tabSetting: Object
	},
	data() {
		return {
			defaultActive: 1,
			showOperation: -1,
			talkingTipList: [],
			removeId: '',
			modalSetting: {
				show: false,
				message: '确认删除该动态?'
			}
		};
	},
	created() {},
	onShareAppMessage(res) {
		return {
			title: '自定义分享标题',
			path: '/pages/test/test?id=123'
		};
	},
	methods: {
		openOperation(index) {
			this.showOperation == index ? (this.showOperation = -1) : (this.showOperation = index);
		},
		tabEvent(index) {
			this.defaultActive = index;
		},
		remove(id) {
			this.modalSetting.show = true;
			this.removeId = id;
		},
		deleteDynamic() {
			deleteDynamic(this.removeId).then(res => {
				if (res.status == 1) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
					this.$emit('init');
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.mine-tab {
	width: 100%;
}
.tab-head {
	font-size: 36upx;
	color: rgba(131, 137, 160, 1);
	line-height: 48upx;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 30upx;
	.tab-head-item {
		margin-right: 40upx;
	}
	.tab-head-item.active {
		font-weight: 500;
		color: rgba(71, 74, 88, 1);
	}
	.tab-head-item.active:after {
		content: '';
		display: block;
		margin: auto;
		width: 32upx;
		height: 8upx;
		background: linear-gradient(299deg, rgba(248, 212, 87, 1) 0%, rgba(254, 21, 194, 1) 100%);
		border-radius: 4px;
	}
}
.life-experience {
	display: flex;
	justify-content: flex-start;
	.life-experience-icon,
	.life-experience-icon image {
		display: block;
		width: 32upx;
		height: 32upx;
	}
	.life-experience-line {
		margin-left: 20upx;
		width: 618upx;
		flexgrow: 1;
		margin-bottom: 30upx;
		.life-experience-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.life-experience-time {
			font-size: 28upx;
			color: rgba(131, 137, 160, 1);
		}
		.life-experience-content {
			line-height: 50upx;
		}
	}

	.life-experience-operation {
		position: relative;
		.dot {
			display: inline-block;
			width: 5px;
			height: 5px;
			background: rgba(206, 209, 221, 1);
			margin-left: 10upx;
		}
		.life-experience-btn {
			position: absolute;
			right: 0;
			top: 52upx;
			display: none;
			border: 1px solid rgba(233, 235, 240, 1);
			z-index: 99;
			view {
				width: 196upx;
				line-height: 80upx;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				.on {
					background: rgba(243, 246, 248, 1);
				}
			}
		}
		.life-experience-btn.on {
			display: block;
		}
	}
}
.life-experience-pic.one-pic {
	display: flex;
	justify-content: space-around;
	image {
		display: block;
		max-width: 100%;
	}
}
.life-experience-pic.two-pic {
	display: flex;
	justify-content: space-between;
	image {
		display: block;
		width: 48%;
	}
}
.life-experience-pic.three-pic {
	display: flex;
	justify-content: space-between;
	image {
		display: block;
		width: 33%;
	}
}
.personal-data-tag-box {
	display: flex;
	justify-content: space-around;
	.personal-data-tag {
		width: 210upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 2px;
	}
}
.tab-view {
	min-height: 300upx;
}
.basic-data-title {
	line-height: 42upx;
	font-size: 32upx;
	font-weight: 500;
	color: rgba(71, 74, 88, 1);
	margin: 60upx 0 40upx;
}
.basic-data-li {
	font-size: 32upx;
	font-weight: 400;
	color: rgba(71, 74, 88, 1);
	line-height: 60upx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.basic-data-content {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.basic-data-content .open-up {
	background: linear-gradient(223deg, rgba(255, 232, 135, 1) 0%, rgba(244, 196, 73, 1) 100%);
	border-radius: 12px;
	color: rgba(139, 87, 42, 1);
	font-size: 28upx;
	font-weight: 500;
	width: 124upx;
	line-height: 48upx;
	text-align: center;
	margin-left: 20upx;
}
.share-btn {
	background: linear-gradient(135deg, rgba(252, 79, 145, 1) 0%, rgba(253, 108, 230, 1) 100%);
	border-radius: 2px;
	color: #fff;
	margin-top: 60upx;
}
.video_box {
	padding: 20upx 0;
}
</style>
